<template>
  <div class="journal">
    <NavigationBar>
      <Row :gutter="25">
        <i-col span="6" style="text-align: center">
          <Affix :offset-top="50">
            <Card dis-hover :bordered="false">
              <!--个人信息-->
              <PersonalInfo class="animate__animated animate__rotateIn"/>
              <!--个人信息-->
              <!--博客统计-->
              <Statistic class="animate__animated animate__rubberBand"/>
              <!--博客统计-->
            </Card>
          </Affix>
        </i-col>
        <i-col span="12">
          <Card :bordered="false" dis-hover style="margin-top: 50px" class="animate__animated animate__backInDown">
            <Timeline>
              <TimelineItem v-for="(item, index) in journalList" :key="index" :color="color[item.state - 1]">
                <p class="time">{{item.gmtCreate | formatTime}}</p>
                <p class="content">{{item.operation}}</p>
              </TimelineItem>
            </Timeline>
          </Card>
        </i-col>
        <i-col span="6">
          <Affix :offset-top="50">
            <List class="animate__animated animate__backInUp" style="margin-top: 30px" header="推荐文章" border>
              <ListItem class="list-item" v-for="(item, index) in recommendArticles" :key="index">
                <div @click="articleDetail(item.id)">
                  {{item.title}}
                </div>
              </ListItem>
            </List>
          </Affix>

        </i-col>
      </Row>
    </NavigationBar>
  </div>
</template>

<script>
  import NavigationBar from "@/components/common/NavigationBar";
  import PersonalInfo from "@/components/common/PersonalInfo";
  import Statistic from "@/components/common/Statistic";
  import {listJournal, recommendArticles} from "@/network/journal";
  import moment from 'moment'

  export default {
    name: "Journal",
    data() {
      return {
        journalList: [],
        color: ['blue', 'red', 'green'],
        recommendArticles: []
      }
    },
    components: {
      NavigationBar,
      PersonalInfo,
      Statistic
    },
    mounted() {
      this.listJournal();
      this.listRecommendArticles();
    },
    methods: {
      listJournal() {
        listJournal().then(res => {
          this.journalList = res.data.listJournal;
        })
      },
      listRecommendArticles() {
        recommendArticles().then(res => {
          this.recommendArticles = res.data.articleList;
        })
      },
      articleDetail(articleId) {
        this.$store.commit("setArticleDetailId", articleId);
        this.$router.push({path: '/articleDetail'})
      }
    },
    filters: {
      formatTime: function (date) {
        return moment(date).format("YYYY年MM月DD日");
      }
    }
  }
</script>

<style scoped>
  .time{
    font-size: 14px;
    font-weight: bold;
  }
  .content{
    padding-top: 6px;
    padding-left: 5px;
  }
  .list-item :hover {
    cursor: default;
  }
</style>